<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>习惯详情</title>
    <link href="/static/h5/css/mui.min.css" rel="stylesheet"/>
    <link href="/static/h5/css/icons-extra.css" rel="stylesheet"/>
    <link href="/static/h5/css/import.css" rel="stylesheet"/>
    <link href="/static/layui-v2.1.7/css/layui.css" rel="stylesheet">

    
    <script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
	<!-- 
	<header class="mui-bar mui-bar-nav sy-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">习惯详情</h1>
	</header>
	 -->

	
	<div class="mui-content">
		
		<div class="mui-table-view mui-top-not">
			<div class="mui-table-view-cell sy-add-zuoye">
				<div class="mui-ithImg mui-imgrow">
					<div class="mui-pull-left img-col-100" style="">
						<img src="<{$habit_info.image}>">
					</div>
					<div class="mui-media-body mui-col-lay">
						<div class="muiCol" style="width:70%;">
							<div class="c-3ac9af"><{$habit_info.name}></div>
							<div><p class="mui-col-xs-9 mui-ellipsis"><{$habit_info.remark}></p></div>
							
						</div>
						<div class="mui-text-justify"><span class="mui-btn mui-btn-success">加入</span></div>
					</div>
				</div>
			</div>
		</div>
		
		<!--推荐阅读开始-->
		<div id="example-yuedu"><!--VueJS 渲染ID所用的开始-->
			<div class="mui-card">
				<div class="mui-icon-header"><span class="img-col-80"><img src="/static/h5/images/100-003.png"></span>推荐阅读</div>
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell" v-for="(item,hover) in listCard">
						<div class="mui-navigate-right">
							<div class="mui-media-body">
								<div class="mui-demo01-title mui-table">
									<div class="mui-table-cell mui-ellipsis"><a :href="'/h5/article/detail/' + item.content_id ">{{ item.title }}</a></div>
								</div>
								<!-- <p class="mui-ellipsis"></p>
								<div class="mui-comment-bot mui-col-lay">
									<div class="itSpan"><span class="mui-icon-extra mui-icon-extra-like"></span>20</div>
									<div class="itSpan"><span class="mui-icon-extra mui-icon-extra-heart-filled" v-bind:class="{'mui-icon-extra-hover':hover!=1}"></span>20</div>
								</div> -->
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script>
		var LinshiExample1 = new Vue({
		  	el: '#example-yuedu',
		  	data: {
	    		listCard: ''
		  	},
		  	methods:{
		  		get_article_list:function(e){
		  			axios.post("/h5/habit/get_recommend_article",{task_type_id: <{$habit_info.id}>}).then(function (response) {
                        let data = response.data;
						LinshiExample1.listCard = response.data.data.list;
                    }).catch(function (error) {

                    })
		  		}
		  	}
		})
		LinshiExample1.get_article_list();
		/*$(".mui-progressbar").each(function(i){
			this.progressbar({progress:this.getAttribute("data-progress")}).show();
		});*/
		</script>
		
		<!--评论开始-->
		<div id="example-pinglun"><!--VueJS 渲染ID所用的开始-->
			<div class="mui-card" v-for="(item,show) in listCard">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="javascript:;" class="mui-ithImg">
							<div class="mui-pull-left photo-image" v-bind:style="{backgroundImage:'url('+item.head_img_url+')'}"></div>
							<div class="mui-media-body">
								<div class="mui-demo01-title mui-table">
									<div class="mui-table-cell mui-ellipsis">{{item.nick}}</div>
								</div>
								<p>{{item.add_time}}</p>
							</div>
							<div class="mui-row mui-table" v-html="item.text">{{item.text}}</div>
							<div class="mui-image-bot" v-if="item.image"><img v-bind:src="item.image" v-bind:data-preview-src="item.image"></div>
						</a>
					</li>
				</ul>
				<div class="mui-image-bot"><img v-bind:src="item.img"></div>
			</div>
		</div><!--VueJS 渲染ID所用的结束-->
		
		<script>//VueJS 渲染的JS
		var LinshiExample4 = new Vue({
		  	el: '#example-pinglun',
		  	data: {
	    		listCard: '',
	    		page:1,
	    		total_page:1
		  	},
		  	methods:{
		  		get_dynamic_list:function(e){
		  			axios.post("/h5/habit/get_habit_dynamic",{task_type_id: <{$habit_info.id}>,page:LinshiExample4.page}).then(function (response) {
                        let data = response.data;
                        if(LinshiExample4.listCard == ''){
                        	LinshiExample4.listCard = response.data.data.list;
                        	LinshiExample4.total_page = response.data.data.total_page;
                        }else{
                        	$.each(response.data.data.list,function(i,obj){
								LinshiExample4.listCard.push(obj);
							});
                        }
                    }).catch(function (error) {

                    })
		  		}
		  	}
		})
		LinshiExample4.get_dynamic_list();
		</script>
	</div>
	
	<script type="text/javascript" src="/static/manage/js/jquery-1.7.2.min.js"></script>
	<script src="/static/layui-v2.1.7/layui.all.js"></script>
	<script>
		layui.use('flow', function(){
		    var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
  			var flow = layui.flow;
		    flow.load({
		        elem: '.mui-content' //流加载容器
		        ,isAuto:true
		        ,end:'加载完了'
		        ,scrollElem: '.mui-content' //滚动条所在元素，一般不用填，此处只是演示需要。
		        ,done: function(page, next){ //执行下一页的回调
		            setTimeout(function(){
		                var lis = [];
		                if(page > 1){
		                	LinshiExample4.page = page;
		                    LinshiExample4.get_dynamic_list();
		                }
		                next(lis.join(''), page < LinshiExample4.total_page); //假设总页数为 10
		            }, 500);
		        }
		    });
		});
	</script>
	
</body>
</html>